<template>
  <div class="contest-problem-detail">
    <problem-detail :problem-model="problemModel" :contestModel="contestModel"/>
  </div>
</template>

<script>
import {getProblemDetail} from '@/network/problem';

import ProblemDetail from "@/components/content/problemDetail/ProblemDetail";
import {getContestDetail} from "@/network/contest";


export default {
  components: {ProblemDetail},
  mounted() {
    this.init()
  },
  data() {
    return {
      problemModel: null,
      contestModel: null,
    }
  },
  methods: {
    init: function () {
      let problemId = this.$route.params.problemId;
      let contestId = this.$route.params.contestId;
      getProblemDetail(problemId).then(res => {
        this.problemModel = res.data;
        console.log(res.data)
      }).catch(_ => {
        console.log(_)
      });
      getContestDetail(contestId).then(res => {
        this.contestModel = res.data;
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      })
    },
    handleSubmit: function () {
      this.modalVisible = true
    },
    goSubmissions: function () {
      let pid = this.$route.params.problemId;
      let cid = this.$route.params.contestId;
      this.$router.push({
        name: 'contest-submission-list',
        params: {
          contestId: cid
        },
        query: {
          problemId: pid
        }
      })
    },
    goContest() {
      let cid = this.$route.params.contestId;
      this.$router.push({
        name: 'contest-problem-list',
        params: {
          contestId: cid
        }
      })
    }
  },
  watch: {
    '$route': function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contest-problem-detail {
  margin: 20px 2%;

  h1, h2 {
    color: #337AB7;
  }

  .description, .input, .output, .hint, .source {
    font-size: 15px;
  }

  .input-sample, .output-sample {
    pre {
      margin: 0px;
      display: block;
      padding: 10px;
      font-size: 14px;
      line-height: 1.5;
      border: 1px solid #eaeefb;
      background-color: #fafafa;
      color: #333;
      border-radius: 4px;
      font-family: Menlo, Monaco, Consolas, monospace;
    }
  }

  .sidebar {
    span {
      font-size: 12px;
    }

    .divider {
      border-bottom: 1px dotted #e9eaec;
      margin-bottom: 15px;
    }
  }
}
</style>
